<template>
  <div class="layout">
    <div class="good_content" v-if="goods.details">
      <div class="top">
        <!-- 商品图片 -->
        <ImageView :img_list="goods.mainPictures"/>
        
        <div class="right_info">
          <h3>{{ goods.name }}</h3>
          <p class="desc">{{ goods.desc }}</p>
          <p class="current_price">
            {{ goods.price }}元
            <span class="before_price">{{ goods.oldPrice }}元</span>
          </p>
          <div class="discount">
            <div class="discount_item">
              <p class="discount_name">促销</p>
              <span class="discount_content">12月好物放送</span>
            </div>
            <div class="discount_item">
              <p class="discount_name">服务</p>
              <span class="discount_content">
                <ul class="list">
                  <li class="li"><span class="point">·</span>无忧退货</li>
                  <li class="li"><span class="point">·</span>无忧退货</li>
                  <li class="li"><span class="point">·</span>无忧退货</li>
                  <li class="li"><span class="know_detail">了解详情</span></li>
                </ul>
              </span>
            </div>
          </div>

          <!-- sku组件 -->
          <XtxSku :goods = 'goods' @change = 'skuChange'/>
          <el-input-number v-model="count" :min="1" @change="goodsNumChange" class="input_num"/>
          <br>
          <button class="add_in_car" @click="add_cart">添加到购物车</button>
        </div>
      </div>
      <div class="content_intro">
        <div class="item">
          <p class="title">销量人气</p>
          <p class="num">{{ goods.salesCount }}+</p>
          <div class="item_detail">
            <i class="iconfont icon-xiaoliang"></i>
            <span class="detail_name">销量人气</span>
          </div>
        </div>
        <div class="item">
          <p class="title">商品评价</p>
          <p class="num">{{ goods.commentCount }}+</p>
          <div class="item_detail">
            <i class="iconfont icon-pingjia"></i>
            <span class="detail_name">查看评价</span>
          </div>
        </div>
        <div class="item">
          <p class="title">收藏人气</p>
          <p class="num">{{ goods.collectCount }}+</p>
          <div class="item_detail">
            <i class="iconfont icon-shoucang"></i>
            <span class="detail_name">收藏商品</span>
          </div>
        </div>
        <div class="item">
          <p class="title">品牌人气</p>
          <p class="num">{{ goods.brand?.name }}</p>
          <div class="item_detail">
            <i class="iconfont icon-pinpai"></i>
            <span class="detail_name">品牌主页</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useGoodList } from "../composables/useGoodList";
import { ElMessage } from "element-plus";
import "element-plus/dist/index.css";
import { useCartStore } from '@/stores/cartStore'

const count = ref(1)
const { goods } = useGoodList();
let skuObj = {}
const cartStore = useCartStore()

//数字输入框方法
const goodsNumChange = (value)=>{
  count.value = value
}
const skuChange = (sku)=>{
  skuObj = sku
}
//加入购物车按钮
const add_cart = ()=>{
  if (skuObj.skuId){
    cartStore.addCart({
      id:goods.value.id,
      name:goods.value.name,
      picture:goods.value.mainPictures[0],
      price:goods.value.price,
      count:count.value,
      skuId:skuObj.skuId,
      attrsText:skuObj.specsText,
      selected:true
    },count.value)
    ElMessage({type:'success',message:'添加成功'})
  }else{
    ElMessage({ type: "warning", message: "请选择规格" })
  }
}
</script>

<style lang="scss" scoped>
.layout {
  .good_content {
    background: white;
    margin: 0 150px;
    height: 650px;

    .content_intro {
      display: flex;
      align-items: flex-start;
      text-align: center;
      padding: 0 30px;
      .item {
        padding: 10px;
        border-right: 1px solid #ccc;

        &:last-child {
          border-right: 0;
        }

        .title {
          color: #ccc;
        }

        .num {
          padding-top: 5px;
          color: red;
        }

        .item_detail {
          padding-top: 5px;

          .iconfont {
            color: #40e0d0;
            padding: 0 5px;
            font-size: 15px;
          }

          .detail_name {
            font-size: 15px;
          }
        }
      }
    }

    .top {
      display: flex;
      .right_info {
        padding: 30px;
        width: 600px;
        .desc {
          padding-top: 5px;
          color: #ccc;
          font-size: 15px;
        }

        .current_price {
          padding-top: 5px;
          font-size: 20px;
          color: red;

          .before_price {
            font-size: 10px;
            text-decoration: line-through;
          }
        }

        .discount {
          margin: 20px 0;
          background: #fff;
          border-radius: 5px;
          .discount_item {
            display: flex;
            align-items: center;
            padding: 5px 0;
            .discount_name {
              padding: 5px;
              font-size: 15px;
              color: #ccc;
            }

            .discount_content {
              padding-left: 20px;
              font-size: 15px;

              .list {
                display: flex;
                list-style-type: none;

                .li {
                  padding: 0 5px;
                  display: flex;
                  align-items: center;
                  .point {
                    padding: 2px;
                    font-size: 20px;
                    color: #40e0d0;
                  }

                  .know_detail {
                    cursor: pointer;
                    font-size: 15px;
                    color: #40e0d0;
                  }
                }
              }
            }
          }
        }
        .input_num{
          margin: 10px;
        }
        .add_in_car {
          margin: 10px;
          height: 35px;
          font-size: 12px;
          cursor: pointer;
          border: 0;
          color: white;
          background: #32cd99;
          border-radius: 10px;
        }
      }
    }
  }
}
</style>